// 标签页保存/加载功能
function initTabManagementFunctions(app) {
    // 扩展HttpRequestTool类，添加标签页保存/加载相关方法
    Object.assign(app, {
        async saveCurrentTab() {
            this.saveCurrentTabData();
            const tab = this.tabs.get(this.currentTab);
            
            // 如果标签页已经保存过（有filename字段），直接保存
            if (tab.filename) {
                try {
                    // 确保保存时保留原始分组信息
                    // 从服务器获取原始标签页数据，提取分组信息
                    const response = await fetch(`/api/tabs/${tab.filename}`);
                    if (response.ok) {
                        const originalTabData = await response.json();
                        // 如果原始数据中有分组信息，保留它
                        if (originalTabData.group) {
                            tab.group = originalTabData.group;
                        }
                    }
                    
                    await saveTab(tab);
                    this.showMessage('标签页保存成功');
                    this.updateTabsDisplay(); // 更新标签页显示
                } catch (error) {
                    alert('保存失败: ' + error.message);
                }
            } else {
                // 新标签页显示保存弹框
                this.showSaveTabDialog(tab);
            }
        },

        // 显示分组管理弹框
        async showManageGroupsDialog() {
            try {
                // 获取所有分组信息
                const response = await fetch('/api/tabs/list');
                let groups = new Map(); // 分组名 -> 标签页数量
                
                if (response.ok) {
                    const tabFiles = await response.json();
                    // 确保tabFiles是数组
                    if (Array.isArray(tabFiles)) {
                        tabFiles.forEach(file => {
                            const group = file.group || '默认分组';
                            groups.set(group, (groups.get(group) || 0) + 1);
                        });
                    } else {
                        // 如果返回的不是数组，显示默认分组
                        groups.set('默认分组', 0);
                    }
                } else {
                    // 如果获取失败，至少显示默认分组
                    groups.set('默认分组', 0);
                }

                // 生成分组列表HTML
                const groupsHtml = Array.from(groups.entries()).map(([groupName, count]) => `
                    <div class="group-item" data-group="${this.escapeHtml(groupName)}">
                        <div class="group-info">
                            <span class="group-name">${this.escapeHtml(groupName)}</span>
                            <span class="group-count">(${count} 个标签页)</span>
                        </div>
                        <div class="group-actions">
                            <button class="btn btn-small btn-secondary edit-group-btn" data-group="${this.escapeHtml(groupName)}">编辑</button>
                            <button class="btn btn-small btn-danger delete-group-btn" data-group="${this.escapeHtml(groupName)}" ${groupName === '默认分组' ? 'disabled' : ''}>删除</button>
                        </div>
                    </div>
                `).join('');

                const modalContent = `
                    <div class="manage-groups-container">
                        <div class="groups-header">
                            <h4>分组管理</h4>
                            <button class="btn btn-primary" id="add-group-btn">新增分组</button>
                        </div>
                        <div class="groups-list">
                            ${groupsHtml || '<div class="empty-state">暂无分组</div>'}
                        </div>
                    </div>
                `;

                this.showModal('管理分组', modalContent);

                // 绑定事件
                setTimeout(() => {
                    // 新增分组按钮
                    const addGroupBtn = document.getElementById('add-group-btn');
                    if (addGroupBtn) {
                        addGroupBtn.onclick = () => this.showAddGroupDialog();
                    }

                    // 编辑分组按钮
                    document.querySelectorAll('.edit-group-btn').forEach(btn => {
                        btn.onclick = (e) => {
                            e.stopPropagation();
                            const groupName = btn.getAttribute('data-group');
                            this.showEditGroupDialog(groupName);
                        };
                    });

                    // 删除分组按钮
                    document.querySelectorAll('.delete-group-btn').forEach(btn => {
                        btn.onclick = (e) => {
                            e.stopPropagation();
                            const groupName = btn.getAttribute('data-group');
                            const count = groups.get(groupName) || 0;
                            this.showDeleteGroupDialog(groupName, count);
                        };
                    });
                }, 0);

            } catch (error) {
                console.error('显示分组管理弹框失败:', error);
                alert('获取分组信息失败: ' + error.message);
            }
        },

        // HTML转义函数
        escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        },

        // 显示新增分组弹框
        showAddGroupDialog() {
            const modalContent = `
                <div class="add-group-container">
                    <div class="form-group">
                        <label for="new-group-name">分组名称:</label>
                        <input type="text" id="new-group-name" class="form-control" placeholder="请输入分组名称" maxlength="50">
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" id="cancel-add-group">取消</button>
                        <button type="button" class="btn btn-primary" id="confirm-add-group">创建</button>
                    </div>
                </div>
            `;

            this.showModal('新增分组', modalContent);

            // 绑定事件
            setTimeout(() => {
                const nameInput = document.getElementById('new-group-name');
                const cancelBtn = document.getElementById('cancel-add-group');
                const confirmBtn = document.getElementById('confirm-add-group');

                // 自动聚焦到输入框
                if (nameInput) {
                    nameInput.focus();
                }

                // 取消按钮
                if (cancelBtn) {
                    cancelBtn.onclick = () => {
                        this.hideModal();
                        // 返回到分组管理界面
                        setTimeout(() => this.showManageGroupsDialog(), 100);
                    };
                }

                // 确认按钮
                if (confirmBtn) {
                    confirmBtn.onclick = async () => {
                        const groupName = nameInput.value.trim();
                        if (!groupName) {
                            alert('请输入分组名称');
                            nameInput.focus();
                            return;
                        }

                        if (groupName === '默认分组') {
                            alert('不能使用"默认分组"作为分组名称');
                            nameInput.focus();
                            return;
                        }

                        try {
                            // 检查分组是否已存在
                            const response = await fetch('/api/tabs/list');
                            if (response.ok) {
                                const tabFiles = await response.json();
                                const existingGroups = new Set();
                                // 确保tabFiles是数组
                                if (Array.isArray(tabFiles)) {
                                    tabFiles.forEach(file => {
                                        if (file.group) {
                                            existingGroups.add(file.group);
                                        }
                                    });
                                }

                                if (existingGroups.has(groupName)) {
                                    alert('分组名称已存在，请使用其他名称');
                                    nameInput.focus();
                                    return;
                                }
                            }

                            // 创建一个空的标签页来建立分组（后续可以删除这个临时标签页）
                            const tempTab = {
                                name: `临时标签页_${Date.now()}`,
                                method: 'GET',
                                url: 'about:blank',
                                group: groupName,
                                filename: `temp_${Date.now()}.json`,
                                uniqueId: this.generateUniqueId(),
                                body: '',
                                headers: {},
                                params: {},
                                isTemp: true // 标记为临时标签页
                            };

                            await saveTab(tempTab);
                            this.showMessage('分组创建成功');
                            this.hideModal();
                            
                            // 返回到分组管理界面
                            setTimeout(() => this.showManageGroupsDialog(), 100);

                        } catch (error) {
                            console.error('创建分组失败:', error);
                            alert('创建分组失败: ' + error.message);
                        }
                    };
                }

                // 回车键确认
                if (nameInput) {
                    nameInput.onkeypress = (e) => {
                        if (e.key === 'Enter') {
                            confirmBtn.click();
                        }
                    };
                }
            }, 0);
        },

        // 显示删除分组确认弹框
        showDeleteGroupDialog(groupName) {
            // 首先获取分组中的标签页数量
            fetch('/api/tabs/list')
                .then(response => response.json())
                .then(tabFiles => {
                    const tabsInGroup = tabFiles.filter(file => file.group === groupName);
                    const tabCount = tabsInGroup.length;
                    
                    let warningMessage = '';
                    if (tabCount > 0) {
                        warningMessage = `<div class="alert alert-warning">
                            <strong>警告：</strong>该分组中包含 ${tabCount} 个标签页，删除分组将同时删除分组中的所有标签页数据，此操作不可恢复！
                        </div>`;
                    }

                    const modalContent = `
                        <div class="delete-group-container">
                            <div class="delete-group-info">
                                <p>确定要删除分组 "<strong>${this.escapeHtml(groupName)}</strong>" 吗？</p>
                                ${warningMessage}
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn btn-secondary" id="cancel-delete-group">取消</button>
                                <button type="button" class="btn btn-danger" id="confirm-delete-group">确认删除</button>
                            </div>
                        </div>
                    `;

                    this.showModal('删除分组', modalContent);

                    // 绑定事件
                    setTimeout(() => {
                        const cancelBtn = document.getElementById('cancel-delete-group');
                        const confirmBtn = document.getElementById('confirm-delete-group');

                        // 取消按钮
                        if (cancelBtn) {
                            cancelBtn.onclick = () => {
                                this.hideModal();
                                // 返回到分组管理界面
                                setTimeout(() => this.showManageGroupsDialog(), 100);
                            };
                        }

                        // 确认删除按钮
                        if (confirmBtn) {
                            confirmBtn.onclick = async () => {
                                try {
                                    // 删除分组中的所有标签页
                                    const deletePromises = [];
                                    for (const tabFile of tabsInGroup) {
                                        deletePromises.push(
                                            fetch(`/api/tabs/${tabFile.filename}`, {
                                                method: 'DELETE'
                                            })
                                        );
                                    }

                                    await Promise.all(deletePromises);
                                    
                                    if (tabCount > 0) {
                                        this.showMessage(`分组"${groupName}"及其包含的 ${tabCount} 个标签页已删除`);
                                    } else {
                                        this.showMessage(`分组"${groupName}"已删除`);
                                    }
                                    
                                    this.hideModal();
                                    
                                    // 返回到分组管理界面
                                    setTimeout(() => this.showManageGroupsDialog(), 100);

                                } catch (error) {
                                    console.error('删除分组失败:', error);
                                    alert('删除分组失败: ' + error.message);
                                }
                            };
                        }
                    }, 0);
                })
                .catch(error => {
                    console.error('获取分组信息失败:', error);
                    alert('获取分组信息失败: ' + error.message);
                });
        },

        // 显示编辑分组弹框
        showEditGroupDialog(oldGroupName) {
            const modalContent = `
                <div class="edit-group-container">
                    <div class="form-group">
                        <label for="edit-group-name">分组名称:</label>
                        <input type="text" id="edit-group-name" class="form-control" placeholder="请输入分组名称" maxlength="50" value="${this.escapeHtml(oldGroupName)}">
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" id="cancel-edit-group">取消</button>
                        <button type="button" class="btn btn-primary" id="confirm-edit-group">保存</button>
                    </div>
                </div>
            `;

            this.showModal('编辑分组', modalContent);

            // 绑定事件
            setTimeout(() => {
                const nameInput = document.getElementById('edit-group-name');
                const cancelBtn = document.getElementById('cancel-edit-group');
                const confirmBtn = document.getElementById('confirm-edit-group');

                // 自动聚焦到输入框并选中文本
                if (nameInput) {
                    nameInput.focus();
                    nameInput.select();
                }

                // 取消按钮
                if (cancelBtn) {
                    cancelBtn.onclick = () => {
                        this.hideModal();
                        // 返回到分组管理界面
                        setTimeout(() => this.showManageGroupsDialog(), 100);
                    };
                }

                // 确认按钮
                if (confirmBtn) {
                    confirmBtn.onclick = async () => {
                        const newGroupName = nameInput.value.trim();
                        if (!newGroupName) {
                            alert('请输入分组名称');
                            nameInput.focus();
                            return;
                        }

                        if (newGroupName === oldGroupName) {
                            // 名称没有变化，直接返回
                            this.hideModal();
                            setTimeout(() => this.showManageGroupsDialog(), 100);
                            return;
                        }

                        if (newGroupName === '默认分组') {
                            alert('不能使用"默认分组"作为分组名称');
                            nameInput.focus();
                            return;
                        }

                        try {
                            // 检查新分组名是否已存在
                            const response = await fetch('/api/tabs/list');
                            if (response.ok) {
                                const tabFiles = await response.json();
                                const existingGroups = new Set();
                                // 确保tabFiles是数组
                                if (Array.isArray(tabFiles)) {
                                    tabFiles.forEach(file => {
                                        if (file.group && file.group !== oldGroupName) {
                                            existingGroups.add(file.group);
                                        }
                                    });
                                }

                                if (existingGroups.has(newGroupName)) {
                                    alert('分组名称已存在，请使用其他名称');
                                    nameInput.focus();
                                    return;
                                }

                                // 更新所有属于该分组的标签页
                                const tabsToUpdate = tabFiles.filter(file => file.group === oldGroupName);
                                const updatePromises = [];

                                for (const tabFile of tabsToUpdate) {
                                    // 获取完整的标签页数据
                                    const tabResponse = await fetch(`/api/tabs/${tabFile.filename}`);
                                    if (tabResponse.ok) {
                                        const tabData = await tabResponse.json();
                                        tabData.group = newGroupName;
                                        updatePromises.push(saveTab(tabData));
                                    }
                                }

                                await Promise.all(updatePromises);
                                this.showMessage(`分组"${oldGroupName}"已重命名为"${newGroupName}"`);
                                this.hideModal();
                                
                                // 返回到分组管理界面
                                setTimeout(() => this.showManageGroupsDialog(), 100);
                            }

                        } catch (error) {
                            console.error('编辑分组失败:', error);
                            alert('编辑分组失败: ' + error.message);
                        }
                    };
                }

                // 回车键确认
                if (nameInput) {
                    nameInput.onkeypress = (e) => {
                        if (e.key === 'Enter') {
                            confirmBtn.click();
                        }
                    };
                }
            }, 0);
        },

        // 新增：显示保存标签页弹框
        async showSaveTabDialog(tab) {
            try {
                // 获取已有的分组列表
                const response = await fetch('/api/tabs/list');
                let existingGroups = new Set(['默认分组']);
                
                if (response.ok) {
                    const tabFiles = await response.json();
                    // 确保tabFiles是数组
                    if (Array.isArray(tabFiles)) {
                        tabFiles.forEach(file => {
                            if (file.group) {
                                existingGroups.add(file.group);
                            }
                        });
                    }
                }

                const groupOptions = Array.from(existingGroups).map(group => 
                    `<option value="${group}">${group}</option>`
                ).join('');

                const modalContent = `
                    <div class="form-group">
                        <label for="save-tab-name">标签页名称:</label>
                        <input type="text" id="save-tab-name" class="form-control" value="${tab.name || '未命名'}" placeholder="请输入标签页名称">
                    </div>
                    <div class="form-group">
                        <label for="save-tab-group">分组:</label>
                        <div style="display: flex; gap: 8px;">
                            <select id="save-tab-group" class="form-control" style="flex: 1;">
                                ${groupOptions}
                            </select>
                            <button type="button" id="new-group-btn" class="btn btn-secondary">新建分组</button>
                        </div>
                    </div>
                    <div class="form-group" id="new-group-input" style="display: none;">
                        <label for="new-group-name">新分组名称:</label>
                        <input type="text" id="new-group-name" class="form-control" placeholder="请输入新分组名称">
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary" id="cancel-save">取消</button>
                        <button type="button" class="btn btn-primary" id="confirm-save">保存</button>
                    </div>
                `;

                this.showModal('保存标签页', modalContent);

                // 绑定事件
                setTimeout(() => {
                    const nameInput = document.getElementById('save-tab-name');
                    const groupSelect = document.getElementById('save-tab-group');
                    const newGroupBtn = document.getElementById('new-group-btn');
                    const newGroupInput = document.getElementById('new-group-input');
                    const newGroupName = document.getElementById('new-group-name');
                    const cancelBtn = document.getElementById('cancel-save');
                    const confirmBtn = document.getElementById('confirm-save');
                    const closeBtn = document.querySelector('.modal-close');

                    // 设置当前分组
                    if (tab.group && groupSelect) {
                        groupSelect.value = tab.group;
                    }

                    // 新建分组按钮
                    if (newGroupBtn) {
                        newGroupBtn.onclick = () => {
                            if (newGroupInput.style.display === 'none') {
                                newGroupInput.style.display = 'block';
                                newGroupBtn.textContent = '取消新建';
                                newGroupName.focus();
                            } else {
                                newGroupInput.style.display = 'none';
                                newGroupBtn.textContent = '新建分组';
                                newGroupName.value = '';
                            }
                        };
                    }

                    // 取消按钮
                    if (cancelBtn) {
                        cancelBtn.onclick = () => this.hideModal();
                    }

                    // 关闭按钮
                    if (closeBtn) {
                        closeBtn.onclick = () => this.hideModal();
                    }

                    // 确认保存按钮
                    if (confirmBtn) {
                        confirmBtn.onclick = async () => {
                            const name = nameInput.value.trim();
                            if (!name) {
                                alert('请输入标签页名称');
                                nameInput.focus();
                                return;
                            }

                            let group = groupSelect.value;
                            const newGroup = newGroupName.value.trim();
                            
                            // 如果输入了新分组名称，使用新分组
                            if (newGroup) {
                                group = newGroup;
                            }

                            // 更新标签页信息
                            tab.name = name;
                            tab.group = group;

                            try {
                                await saveTab(tab);
                                this.hideModal();
                                this.showMessage('标签页保存成功');
                                this.updateTabsDisplay(); // 更新标签页显示
                            } catch (error) {
                                alert('保存失败: ' + error.message);
                            }
                        };
                    }

                    // 聚焦到名称输入框
                    if (nameInput) {
                        nameInput.focus();
                        nameInput.select();
                    }
                }, 0);

            } catch (error) {
                console.error('显示保存弹框失败:', error);
                // 如果获取分组失败，直接保存
                try {
                    await saveTab(tab);
                    this.showMessage('标签页保存成功');
                } catch (saveError) {
                    alert('保存失败: ' + saveError.message);
                }
            }
        },

        // 新增：切换分组展开/折叠
        toggleGroup(groupHeader) {
            const toggle = groupHeader.querySelector('.group-toggle');
            const content = groupHeader.nextElementSibling;
            
            if (content.style.display === 'none') {
                content.style.display = 'block';
                toggle.textContent = '▼';
            } else {
                content.style.display = 'none';
                toggle.textContent = '▶';
            }
        },

        async showLoadTabDialog() {
            try {
                // 获取已保存的标签页列表
                const response = await fetch('/api/tabs/list');
                let tabFiles = [];
                let errorMessage = '';

                if (response.ok) {
                    const responseData = await response.json();
                    tabFiles = Array.isArray(responseData) ? responseData : [];
                } else {
                    errorMessage = '获取标签页列表失败';
                }

                // 新增：顶部始终显示导入按钮
                let topBarHtml = `
                    <div style="margin-bottom:12px;display:flex;gap:8px;">
                        <button class="btn btn-secondary" id="import-tabs-btn">导入</button>
                        <input type="file" id="import-tabs-file" accept="application/json" style="display:none;" />
                        <button class="btn btn-secondary" id="manage-groups-btn">管理分组</button>
                        ${tabFiles.length > 0 ? '<button class="btn btn-primary" id="export-tabs-btn">导出选中</button>' : ''}
                        ${tabFiles.length > 0 ? '<button class="btn btn-danger" id="clear-tabs-btn">清空</button>' : ''}
                    </div>
                    ${tabFiles.length > 0 ? `
                    <div style="margin-bottom:12px;display:flex;align-items:center;gap:8px;">
                        <input type="checkbox" id="select-all-tabs" style="margin:0;">
                        <label for="select-all-tabs" style="margin:0;cursor:pointer;">全选</label>
                        <button class="btn btn-small btn-secondary" id="collapse-all-groups" style="margin-left:12px;">全部折叠</button>
                    </div>
                    ` : ''}
                `;

                let contentHtml = '';
                if (errorMessage) {
                    contentHtml = `
                        ${topBarHtml}
                        <div class="empty-state">
                            <div class="empty-icon">⚠️</div>
                            <div class="empty-title">获取标签页列表失败</div>
                            <div class="empty-description">请检查网络连接或稍后重试</div>
                            <button class="btn btn-primary" onclick="app.showLoadTabDialog()">重试</button>
                        </div>
                    `;
                } else if (tabFiles.length === 0) {
                    contentHtml = `
                        ${topBarHtml}
                        <div class="empty-state">
                            <div class="empty-icon">📁</div>
                            <div class="empty-title">没有已保存的标签页</div>
                            <div class="empty-description">您还没有保存任何标签页，请先保存一些标签页后再来加载</div>
                        </div>
                    `;
                } else {
                    // 按分组组织标签页
                    const groupedTabs = {};
                    tabFiles.forEach(file => {
                        const group = file.group || '默认分组';
                        if (!groupedTabs[group]) {
                            groupedTabs[group] = [];
                        }
                        groupedTabs[group].push(file);
                    });

                    // 生成树形结构HTML
                    const groupsHtml = Object.keys(groupedTabs).sort().map(groupName => {
                        const tabs = groupedTabs[groupName];
                        const tabsHtml = tabs.map(file =>
                            `<div class="tab-file-item" data-filename="${file.filename}" style="margin-left: 20px;">
                                <input type="checkbox" class="tab-export-checkbox" data-filename="${file.filename}" style="margin-right:8px;">
                                <div class="tab-file-content" onclick="app.loadTab('${file.filename}')">
                                    <div class="tab-file-name">${file.name || file.filename}</div>
                                    <div class="tab-file-info">${file.method} ${file.url}</div>
                                    <div class="tab-file-date">${new Date(file.savedAt).toLocaleString()}</div>
                                </div>
                                <div class="tab-file-actions">
                                    <button class="btn btn-small btn-secondary" onclick="app.showEditTabDialog('${file.filename}', event)">编辑</button>
                                    <button class="btn btn-small btn-danger" onclick="app.deleteTab('${file.filename}', event)">删除</button>
                                </div>
                            </div>`
                        ).join('');

                        return `
                            <div class="tab-group">
                                <div class="tab-group-header" onclick="app.toggleGroup(this)">
                                    <span class="group-toggle">▶</span>
                                    <span class="group-name">${groupName}</span>
                                    <span class="group-count">(${tabs.length})</span>
                                </div>
                                <div class="tab-group-content" style="display: none;">
                                    ${tabsHtml}
                                </div>
                            </div>
                        `;
                    }).join('');

                    contentHtml = `
                        ${topBarHtml}
                        <div class="tab-files-tree">
                            ${groupsHtml}
                        </div>
                    `;
                }

                this.showModal('API管理', contentHtml);

                // 新增：绑定导出按钮事件
                setTimeout(() => {
                    const exportBtn = document.getElementById('export-tabs-btn');
                    if (exportBtn) {
                        exportBtn.onclick = async () => {
                            const checkboxes = document.querySelectorAll('.tab-export-checkbox:checked');
                            if (checkboxes.length === 0) {
                                alert('请至少选择一个标签页进行导出！');
                                return;
                            }
                            const selectedFiles = Array.from(checkboxes).map(cb => cb.getAttribute('data-filename'));
                            // 修正：导出完整标签页内容
                            const selectedTabs = [];
                            for (const filename of selectedFiles) {
                                try {
                                    const res = await fetch(`/api/tabs/${filename}`);
                                    if (res.ok) {
                                        const tab = await res.json();
                                        selectedTabs.push(tab);
                                    }
                                } catch (e) {}
                            }
                            if (selectedTabs.length === 0) {
                                alert('导出失败：未能获取标签页内容');
                                return;
                            }
                            const dataStr = JSON.stringify(selectedTabs, null, 2);
                            const blob = new Blob([dataStr], {type: 'application/json'});
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = 'tabs-export.json';
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        };
                    }

                    // 新增：绑定清空按钮事件
                    const clearBtn = document.getElementById('clear-tabs-btn');
                    if (clearBtn) {
                        clearBtn.onclick = async () => {
                            if (confirm('确定要清空所有标签页吗？此操作不可撤销！')) {
                                try {
                                    // 清空磁盘上的标签页文件
                                    const response = await fetch('/api/tabs/clear', {
                                        method: 'DELETE'
                                    });
                                    
                                    if (response.ok) {
                                        // 只清空已保存标签页的filename字段，将其重置为未保存状态
                                        // 不清空内存中的标签页，保持标签栏上的标签页继续存在
                                        this.tabs.forEach(tab => {
                                            if (tab.filename) {
                                                delete tab.filename; // 移除filename字段，标记为未保存状态
                                            }
                                        });
                                        this.updateTabsDisplay(); // 更新显示以反映未保存状态
                                        this.hideModal();
                                        this.showMessage('所有已保存的标签页已清空！当前打开的标签页已重置为未保存状态。');
                                    } else {
                                        alert('清空失败：' + (await response.text()));
                                    }
                                } catch (error) {
                                    alert('清空失败：' + error.message);
                                }
                            }
                        };
                    }

                    // 新增：绑定全选复选框事件
                    const selectAllCheckbox = document.getElementById('select-all-tabs');
                    if (selectAllCheckbox) {
                        selectAllCheckbox.onchange = () => {
                            const allCheckboxes = document.querySelectorAll('.tab-export-checkbox');
                            allCheckboxes.forEach(checkbox => {
                                checkbox.checked = selectAllCheckbox.checked;
                            });
                        };
                    }

                    // 新增：绑定全部折叠按钮事件
                    const collapseAllBtn = document.getElementById('collapse-all-groups');
                    if (collapseAllBtn) {
                        collapseAllBtn.onclick = () => {
                            const allGroupHeaders = document.querySelectorAll('.tab-group-header');
                            allGroupHeaders.forEach(header => {
                                const toggle = header.querySelector('.group-toggle');
                                const content = header.nextElementSibling;
                                if (content && content.style.display !== 'none') {
                                    content.style.display = 'none';
                                    toggle.textContent = '▶';
                                }
                            });
                        };
                    }

                    // 新增：监听单个复选框变化，更新全选状态
                    const tabCheckboxes = document.querySelectorAll('.tab-export-checkbox');
                    tabCheckboxes.forEach(checkbox => {
                        checkbox.onchange = () => {
                            const allCheckboxes = document.querySelectorAll('.tab-export-checkbox');
                            const checkedCheckboxes = document.querySelectorAll('.tab-export-checkbox:checked');
                            const selectAllCheckbox = document.getElementById('select-all-tabs');
                            if (selectAllCheckbox) {
                                selectAllCheckbox.checked = allCheckboxes.length === checkedCheckboxes.length;
                                selectAllCheckbox.indeterminate = checkedCheckboxes.length > 0 && checkedCheckboxes.length < allCheckboxes.length;
                            }
                        };
                    });
                    // 绑定导入按钮事件
                    const importBtn = document.getElementById('import-tabs-btn');
                    const importFile = document.getElementById('import-tabs-file');
                    if (importBtn && importFile) {
                        importBtn.onclick = () => importFile.click();
                        importFile.onchange = (e) => {
                            const file = e.target.files[0];
                            if (!file) return;
                            const reader = new FileReader();
                            reader.onload = (evt) => {
                                try {
                                    const imported = JSON.parse(evt.target.result);
                                    // 校验格式
                                    if (!Array.isArray(imported)) throw new Error('导入数据格式错误，必须为数组');
                                    let valid = true;
                                    for (const tab of imported) {
                                        if (!tab || typeof tab !== 'object') { valid = false; break; }
                                        if (!tab.name || !tab.method || !tab.url) { valid = false; break; }
                                    }
                                    if (!valid) throw new Error('部分标签页缺少必要字段（name, method, url）');
                                    // 只保存到磁盘，不添加到当前标签栏
                                    const saveAll = [];
                                    for (const tab of imported) {
                                        if (!tab.uniqueId) tab.uniqueId = this.generateUniqueId();
                                        // 新增：生成唯一 filename 字段
                                        tab.filename = tab.filename || `tab_${tab.uniqueId || Date.now()}.json`;
                                        // 修正：body字段始终为字符串
                                        tab.body = tab.body ? String(tab.body) : '';
                                        // 确保有分组字段
                                        if (!tab.group) tab.group = '默认分组';
                                        // 只保存到后端，不添加到内存中的标签页集合
                                        saveAll.push(saveTab(tab));
                                    }
                                    Promise.all(saveAll).then(() => {
                                        this.showMessage('导入成功！');
                                        this.showLoadTabDialog(); // 刷新加载对话框显示新导入的标签页
                                    }).catch(err => {
                                        alert('部分标签页保存失败：' + err.message);
                                    });
                                } catch (err) {
                                    alert('导入失败：' + err.message);
                                }
                            };
                            reader.readAsText(file);
                        };
                    }

                    // 绑定管理分组按钮事件
                    const manageGroupsBtn = document.getElementById('manage-groups-btn');
                    if (manageGroupsBtn) {
                        manageGroupsBtn.onclick = () => this.showManageGroupsDialog();
                    }
                }, 0);

            } catch (error) {
                console.error('获取标签页列表失败:', error);
                const errorContentHtml = `
                    <div class="empty-state">
                        <div class="empty-icon">❌</div>
                        <div class="empty-title">加载失败</div>
                        <div class="empty-description">发生了意外错误：${error.message}</div>
                        <button class="btn btn-primary" onclick="app.showLoadTabDialog()">重试</button>
                    </div>
                `;
                this.showModal('API管理', errorContentHtml);
            }
        },

        // 新增：显示编辑标签页弹框
        async showEditTabDialog(filename, event) {
            if (event) {
                event.stopPropagation();
            }

            try {
                // 获取标签页数据
                const response = await fetch(`/api/tabs/${filename}`);
                if (!response.ok) {
                    throw new Error('获取标签页数据失败');
                }
                const tabData = await response.json();

                // 获取已有的分组列表
                const listResponse = await fetch('/api/tabs/list');
                let existingGroups = new Set(['默认分组']);
                
                if (listResponse.ok) {
                    const tabFiles = await listResponse.json();
                    // 确保tabFiles是数组
                    if (Array.isArray(tabFiles)) {
                        tabFiles.forEach(file => {
                            if (file.group) {
                                existingGroups.add(file.group);
                            }
                        });
                    }
                }

                // HTML转义函数
                const escapeHtml = (text) => {
                    const div = document.createElement('div');
                    div.textContent = text;
                    return div.innerHTML;
                };

                const groupOptions = Array.from(existingGroups).map(group => 
                    `<option value="${escapeHtml(group)}" ${group === (tabData.group || '默认分组') ? 'selected' : ''}>${escapeHtml(group)}</option>`
                ).join('');

                const modalContent = `
                    <div class="form-group">
                        <label for="edit-tab-name">标签页名称:</label>
                        <input type="text" id="edit-tab-name" class="form-control" value="${escapeHtml(tabData.name || '未命名')}" placeholder="请输入标签页名称">
                    </div>
                    <div class="form-group">
                        <label for="edit-tab-group">分组:</label>
                        <div style="display: flex; gap: 8px;">
                            <select id="edit-tab-group" class="form-control" style="flex: 1;">
                                ${groupOptions}
                            </select>
                            <button type="button" id="edit-new-group-btn" class="btn btn-secondary">新建分组</button>
                        </div>
                    </div>
                    <div class="form-group" id="edit-new-group-input" style="display: none;">
                        <label for="edit-new-group-name">新分组名称:</label>
                        <input type="text" id="edit-new-group-name" class="form-control" placeholder="请输入新分组名称">
                    </div>
                    <div class="form-actions" style="margin-top: 20px; text-align: right;">
                        <button type="button" class="btn btn-secondary" id="cancel-edit" style="margin-right: 10px;">取消</button>
                        <button type="button" class="btn btn-primary" id="confirm-edit">保存</button>
                    </div>
                `;

                this.showModal('编辑标签页', modalContent);

                // 绑定事件
                setTimeout(() => {
                    const nameInput = document.getElementById('edit-tab-name');
                    const groupSelect = document.getElementById('edit-tab-group');
                    const newGroupBtn = document.getElementById('edit-new-group-btn');
                    const newGroupInput = document.getElementById('edit-new-group-input');
                    const newGroupName = document.getElementById('edit-new-group-name');
                    const cancelBtn = document.getElementById('cancel-edit');
                    const confirmBtn = document.getElementById('confirm-edit');

                    // 设置原始值（避免HTML转义问题）
                    if (nameInput) {
                        nameInput.value = tabData.name || '未命名';
                    }

                    // 新建分组按钮
                    if (newGroupBtn) {
                        newGroupBtn.onclick = () => {
                            if (newGroupInput.style.display === 'none') {
                                newGroupInput.style.display = 'block';
                                newGroupBtn.textContent = '取消新建';
                                newGroupName.focus();
                            } else {
                                newGroupInput.style.display = 'none';
                                newGroupBtn.textContent = '新建分组';
                                newGroupName.value = '';
                            }
                        };
                    }

                    // 取消按钮
                    if (cancelBtn) {
                        cancelBtn.onclick = () => this.hideModal();
                    }

                    // 确认保存按钮
                    if (confirmBtn) {
                        confirmBtn.onclick = async () => {
                            const name = nameInput.value.trim();
                            if (!name) {
                                alert('请输入标签页名称');
                                nameInput.focus();
                                return;
                            }

                            let group = groupSelect.value;
                            const newGroup = newGroupName.value.trim();
                            
                            // 如果输入了新分组名称，使用新分组
                            if (newGroup) {
                                group = newGroup;
                            }

                            // 更新标签页信息
                            tabData.name = name;
                            tabData.group = group;

                            try {
                                await saveTab(tabData);
                                this.hideModal();
                                this.showMessage('标签页更新成功');
                                // 刷新加载对话框
                                this.showLoadTabDialog();
                            } catch (error) {
                                alert('更新失败: ' + error.message);
                            }
                        };
                    }

                    // 聚焦到名称输入框
                    if (nameInput) {
                        nameInput.focus();
                        nameInput.select();
                    }
                }, 0);

            } catch (error) {
                console.error('显示编辑弹框失败:', error);
                alert('获取标签页数据失败: ' + error.message);
            }
        },

        async loadTab(filename) {
            try {
                const tabData = await loadTab(filename);
                const newId = Math.max(...this.tabs.keys()) + 1;
                tabData.id = newId;

                // 确保加载的标签页有唯一ID，如果没有则生成一个新的
                if (!tabData.uniqueId) {
                    tabData.uniqueId = this.generateUniqueId();
                }

                // 设置filename字段，标识这是已保存的标签页
                tabData.filename = filename;

                this.tabs.set(newId, tabData);
                // 自动切换到新加载的标签页并激活
                this.currentTab = newId;
                this.updateTabsDisplay();
                // 加载标签页数据到界面
                this.loadTabData(tabData);

                this.hideModal();
                this.showMessage('标签页加载成功');

                // 触发新标签页创建事件，让环境选择器更新
                document.dispatchEvent(new CustomEvent('newTabCreated', { 
                    detail: { tabId: newId, tab: tabData } 
                }));
            } catch (error) {
                alert('加载失败: ' + error.message);
            }
        },

        // 删除保存的标签页
        async deleteTab(filename, event) {
            if (event) {
                event.stopPropagation();
            }
            // 使用原生confirm弹窗
            if (!confirm(`确定要删除这个标签页吗？\n此操作不可撤销。`)) {
                return;
            }
            
            try {
                const response = await fetch(`/api/tabs/${filename}`, {
                    method: 'DELETE'
                });
                if (response.ok) {
                    // 立即从DOM中移除该标签页元素
                    const tabElement = document.querySelector(`[data-filename="${filename}"]`);
                    // 找到上级的.tab-group-content的同级的.tab-group-header的下级.group-count
                    const tabGroupContent = tabElement.closest('.tab-group-content');
                    const groupCount = tabGroupContent.previousElementSibling.querySelector('.group-count');
                    // 解析出(2)中的数字，减一后赋值
                    if (groupCount) {
                        const count = parseInt(groupCount.textContent.match(/\((\d+)\)/)[1], 10);
                        if (count <= 1) {
                            // 找到tabGroupContent的父级并移除
                            tabGroupContent.parentElement.remove();
                        }
                        groupCount.textContent = `(${count - 1})`;
                    }
                    if (tabElement) {
                        tabElement.remove();
                    }
                    
                    this.showMessage('标签页删除成功');
                } else {
                    throw new Error(`删除失败: ${response.status}`);
                }
            } catch (error) {
                alert('删除失败: ' + error.message);
            }
        },


        // 绑定加载标签页工具栏事件
        bindLoadTabToolbarEvents() {
            // 导入按钮事件
            const importBtn = document.getElementById('import-tabs-btn');
            const importFile = document.getElementById('import-tabs-file');
            if (importBtn && importFile) {
                importBtn.onclick = () => importFile.click();
                importFile.onchange = async (e) => {
                    const file = e.target.files[0];
                    if (!file) return;
                    
                    try {
                        const text = await file.text();
                        const data = JSON.parse(text);
                        
                        if (!Array.isArray(data)) {
                            throw new Error('导入文件格式不正确，应为标签页数组');
                        }
                        
                        let successCount = 0;
                        for (const tabData of data) {
                            try {
                                await saveTab(tabData);
                                successCount++;
                            } catch (err) {
                                console.error('保存标签页失败:', err);
                            }
                        }
                        
                        this.showMessage(`成功导入 ${successCount} 个标签页`);
                    } catch (err) {
                        alert('导入失败：' + err.message);
                    }
                    
                    // 清空文件输入
                    importFile.value = '';
                };
            }

            // 管理分组按钮事件
            const manageGroupsBtn = document.getElementById('manage-groups-btn');
            if (manageGroupsBtn) {
                manageGroupsBtn.onclick = () => this.showManageGroupsDialog();
            }

            // 其他工具栏事件绑定...
            // 这里可以添加导出选中、清空等按钮的事件绑定
        }
    });
}

// 全局函数定义
async function saveTab(tabData) {
    try {
        // 确保 filename 字段始终传递
        if (!tabData.filename) {
            tabData.filename = `tab_${tabData.uniqueId || tabData.id}.json`;
        }
        
        // 创建一个副本，排除response字段
        const tabDataToSave = { ...tabData };
        delete tabDataToSave.response;
        
        const response = await fetch('/api/tabs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(tabDataToSave)
        });

        if (!response.ok) {
            throw new Error(`保存失败: ${response.status}`);
        }
    } catch (error) {
        throw new Error(`保存标签页失败: ${error.message}`);
    }
}

async function loadTab(filename) {
    try {
        const response = await fetch(`/api/tabs/${filename}`);
        if (response.ok) {
            return await response.json();
        } else {
            throw new Error(`加载失败: ${response.status}`);
        }
    } catch (error) {
        throw new Error(`加载标签页失败: ${error.message}`);
    }
}

// 导出函数以便在其他文件中使用
window.initTabManagementFunctions = initTabManagementFunctions;